<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/lib/bootstrap.min.css" />
		<script src="js/jquery.min.js"></script>
		<script src="js/lib/bootstrap.min.js"></script>
		<script src="js/lib/vue.min.js"></script>
		<script src="js/lib/vue-resource.js"></script>\
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		td {
			border: 1px solid #eee;
			border-collapse: collapse;
			padding: 5px;
			vertical-align: middle !important;
		}		
		.btn{
			padding:2px 3px;
		}
		#tan{
			width:600px;
			height:400px;
			position:fixed;
			left:200px;
			top:50px;
			background:#000000;
			opacity: 0.8;
			z-index:1000;
			display:none;
		}
		#tantwo{
			width:600px;
			height:500px;
			position:fixed;
			left:200px;
			top:10px;
			background:#000000;
			opacity: 0.8;
			z-index:1000;
			display:none;
		}
		#tanth{
			width:600px;
			height:500px;
			position:fixed;
			left:200px;
			top:10px;
			background:#000000;
			opacity: 0.8;
			z-index:1000;
			display:none;
			border-radius:15px;
			box-shadow:1px 5px 50px 5px ;
		}
		#bbt{
			position:absolute;
			right:0;
			top:0
		}
	</style>
	<body>
		<div class="" id="box" style="position:relative;">		
		<div style="padding:15px 5px 0px 5px;border:.5px solid #ccc;margin-bottom:15px;width:100%;box-shadow:3px 5px 15px">
			<table class="table table-hover" style="width:60%;margin:0 auto">				
				<tbody>
					<tr>
						<th colspan="14" style="font-size:26px;color:#337ab7">智能还款交易查询：</th>
					</tr>					
					<tr style="font-size:15px;">
						<td colspan="14">
								用户编号：<input class="form-control" style="width:150px;display:inline-block" type="text" name="" id="" v-model="ph" value="" /><button v-on:click="cardno()" class="btn btn-default" style="margin-left:2px;">查询</button>
						</td>										
					</tr>					
					<tr class="text-center" style="font-size:13px;background:#f1f1f1;">
						<td style="width:45px">序号</td>
						<td>还款任务</td>
						<td>金额</td>
						<td>费率/手续费</td>
						<td>实际金额</td>
						<td>信用卡</td>						
						<td>商户</td>
						<td>状态</td>
						<td>订单号</td>
					</tr>
					<tr  style="font-size:10px;cursor:pointer;" v-on:click="cha(i)" data-toggle="modal" data-target="#dle1" class="text-center" v-for="(i,index) in list0" title="点击查询子任务">						
						<td style="width:30px">{{index+1}}</td>
						<td>{{i.executionTime}}</td>
						<td>{{i.amount}}元</td>
						<td>{{(i.rate*100).toFixed(2)}}%/{{(i.amount*i.rate).toFixed(1)}}元</td>
						<td>{{i.realAmount}}元</td>						
						<td>{{i.payCard}}</td>
						<td>{{i.userId}}</td>	
						<td><!-- {{i.status}} -->
							<span v-show="i.status==0">待执行</span>
							<span v-show="i.status==1">还款成功</span>
							<span v-show="i.status==2">还款失败</span>
							<span v-show="i.status==5">还款失败</span>
						</td>
						<td>{{i.orderCode}}</td>
					</tr>
					<tr>
						<td style="color:red" colspan="15">
							PS:还款任务执行成功会扣除相应的【手续费+单笔还款费用】
						</td>
					</tr>
				</tbody>
			</table>
			<div class="modal fade" role="dialog" id="dle1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button class="close" data-dismiss="modal">
                                    <span class="">&times;</span>
                                </button>
                                <h4 class="modal-title">查看子任务：</h4>
                            </div>
                            <div class="modal-body text-left" style="width:auto;height:auto;">
                                   	  <table class="table table-hover" style="margin-bottom:0">				
											<tbody>															
												<tr class="text-center" style="font-size:13px;background:#f1f1f1;">
													<td style="width:45px">序号</td>
													<td>还款任务</td>
													<td style="font-size:10px;">金额&nbsp;费率/手续费&nbsp;实际金额</td>
													<td>信用卡</td>						
													<td>商户</td>
													<td>状态</td>
													<!-- <td>订单号</td> -->
												</tr>
												<tr  style="font-size:10px;" data-toggle="modal" data-target="#dle1" class="text-center">						
													<td style="width:30px">{{1}}</td>
													<td>{{executionTime}}</td>
													<td>{{amount}}元{{(rate*100).toFixed(2)}}%/{{(amount*rate).toFixed(1)}}元{{realAmount}}元					
													<td>{{payCard}}</td>
													<td>{{userId}}</td>	
													<td><!-- {{i.status}} -->
														<span v-show="status==0">待执行</span>
														<span v-show="status==1">还款成功</span>
														<span v-show="status==2">还款失败</span>
														<span v-show="status==5">还款失败</span>
													</td>
													<!-- <td>{{i.orderCode}}</td> -->
												</tr>
											</tbody>
										</table>
                                      <table class="table table-hover">				
											<tbody>															
												<tr class="text-center" style="font-size:13px;background:#f1f1f1">
													<td style="width:45px">序号</td>
													<td>消费任务</td>
													<td>金额</td>
													<td>信用卡</td>						
													<td>商户</td>
													<td>状态</td>
													<!-- <td>订单号</td> -->
												</tr>
												<tr style="font-size:10px;" class="text-center" v-for="(i,index) in list">						
													<td style="width:30px">{{index+1}}</td>
													<td>{{i.executionTime}}</td>
													<td>{{i.amount}}元</td>						
													<td>{{i.payCard}}</td>
													<td>{{i.userId}}</td>	
													<td><!-- {{i.status}} -->
														<span v-show="i.status==0">待执行</span>
														<span v-show="i.status==3">扣款成功</span>
														<span v-show="i.status==5">扣款失败{{i.message}}</span>
														<span v-show="i.status=='a'">余额不足</span>
													</td>
													<!-- <td>{{i.orderCode}}</td> -->
												</tr>
												<tr>
													<td style="color:red" colspan="15">
														PS：左边为还款任务，右边为消费任务
													</td>
												</tr>
											</tbody>
										</table>		  
                                  
                            </div>
                            <div class="modal-body text-right">                             
                                <!-- <button class="btn btn-primary" data-dismiss="modal" ng-click="que()">确认</button> -->
                                <button class="btn btn-danger" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
			
		</div>
		
		</div>
	</body>

	<script type="text/javascript">
		$(function(){
			var brandid = sessionStorage.getItem(key=3);			
			/*自定义时间戳*/
		Vue.filter('time', function (value) {//value为13位的时间戳
		    function add0(m) {
		        return m < 10 ? '0' + m : m
		    }
		    var time = new Date(parseInt(value));
		    var y = time.getFullYear();
		    var m = time.getMonth() + 1;
		    var d = time.getDate();		
		    return y + '-' + add0(m) + '-' + add0(d);
		});	
		/*自定义过滤器*/
		/*自定义过滤器*/	
		Vue.filter("todo2",function(value){
			if(value == 0){
				return value = "未审核"
			}
			if(value == 1){
				return value = "已通过  √"
			}
			if(value == 2){
				return value = "审核失败×"
			}
			if(value == 3){
				return value = "未提交"
			}
		});
	new Vue({
				el:"#box",
				data: {
					list0:[],
					list1:[],
					list:[],
					lists:[],
					token:"",
					m1:"",
					m2:"",
					m3:"",
					m4:0,
					s1:"",
					s2:"",
					s3:"",
					s4:"",
					s5:"",
					s6:"",
					ph:"",
					ye:"",
					pages:"",
					page:"",
                    i:"",
					num:"",
					ye1:1,
                    idcade:"",
					card:"",
					star:"",
					end:"",
					ss:[],
					id:"",
					ddh:"",
					executionTime:"",
					amount:"",
					rate:"",
					realAmount:"",
					payCard:"",
					userId:"",
					status:""
				},
				created:function(){/*生命周期函数*/
					
				},
				methods:{
				    /*手机号码搜索*/
				    cardno:function(){
				    	console.log(this.ph);
				    	var _this = this;
				    	/*根据手机号码查询用户id*/
				    	$.ajax({
								type:"POST",
								url:window.baseUrl+"user/query/phone",
								async:true,
								data:{
									phone:this.ph
								},
								success:function(data){
									this.id = data.result.id
									console.log(this.id)
									console.log('cg')
									/*获取主线任务*/
								 	$.ajax({
											type:"POST",
											url:window.baseUrl+"paymentchannel/automaticrepaymenttask/findbyuserid",
											async:true,
											data:{
												userId:this.id
											},
											success:function(data){
												/*console.log(data.result)*/
												_this.list0 = data.result;
												console.log(_this.list0);												
											},
											error:function(data){
												console.log(data)
											}
									});
									/*获取子任务*/	
									// $.ajax({
									// 		type:"POST",
									// 		url:window.baseUrl+"paymentchannel/spend/findbyuserid",
									// 		async:true,
									// 		data:{
									// 			userId:this.id
									// 		},
									// 		success:function(data){
									// 			/*console.log(data.result)*/
									// 			_this.list = data.result;
									// 			console.log(_this.list);												
									// 		},
									// 		error:function(data){
									// 			console.log(data)
									// 		}
									// });
								},
								error:function(data){
									console.log(data)
									console.log('sb')
								}
						});
                        
					},
				   	cha:function(i){
				   		/*alert(i.orderCode);*/
				   		// this.list1 = i
				   		console.log(i);
				   		this.ddh = i.orderCode;
				   		var _this = this;
					   		_this.executionTime = i.executionTime;
							_this.amount = i.amount;
							_this.rate = i.rate;
							_this.realAmount = i.realAmount;
							_this.payCard = i.payCard;
							_this.userId = i.userId;
							_this.status = i.status;
						$.ajax({
								type:"POST",
								url:window.baseUrl+"paymentchannel/spend/find/byordercode",
								async:true,
								data:{
									orderCode:this.ddh
								},
								success:function(data){
									/*console.log(data.result)*/
									_this.list = data.result;
									 console.log(_this.list);												
								},
								error:function(data){
									console.log(data)
								}
						});
				   	}				   
                      
					}					
				
			})			
		})
	</script>
</html>

